<style lang="less">
  .estimate-price{

  }
</style>

<template>
  <el-dialog :modal-append-to-body="false" title="运价预估" :visible.sync="dialogVisible" size="tiny" class="estimate-price">
    <el-form label-width="100px" ref="form" :model="form">
      <el-form-item label="数量" required>
        <el-col :span="12">
          <el-form-item
            :rules="{type:'number',required: true, message: '请选择货物类型', trigger: 'change' }"
            prop="billingType">
            <el-select v-model.number="form.billingType" placeholder="请选择货物类型">
              <el-option
                v-for="item in $store.getters.CARGO_NATURE"
                :key="item.id"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :rules="{type:'number',required: true, message: '请填写数量', trigger: 'blur' }"
            prop="num">
            <el-input v-model.number="form.num"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="标准价格"
                    :rules="{type:'number',required: true, message: '请填写价格', trigger: 'blur' }"
                    prop="price">
        <el-input v-model.number="form.price"></el-input>
      </el-form-item>
      <el-form-item label="计算公式">
        <div>
          <div style="max-height: 200px;overflow-y: auto;">
            <div v-for="(item,index) in form.chargingFormulas" :key="index">{{item.description}}</div>
          </div>
          <el-button @click="estimatePriceClick">预估运价</el-button>
        </div>
      </el-form-item>
      <el-form-item label="计算结果">
        <el-input v-model="form.result" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {estimatePrice} from '../../../api/freight/ChargingRule';
export default {
  name: 'EstimatePrice',
  componentName: 'EstimatePrice',
  data () {
    return {
      standardPriceId: null,
      dialogVisible: false,
      loading: false,
      chargingRuleId: null,
      form: {
        price: null,
        num: null,
        result: null,
        billingType: null,
        chargingFormulas: []
      }
    };
  },
  methods: {
    estimatePriceClick () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          estimatePrice(this.chargingRuleId, {
            price: this.form.price,
            num: this.form.num,
            billingType: this.form.billingType
          }).then(res => {
            if (res.data.successFlg) {
              if (res.data.obj) {
                this.form.result = res.data.obj;
              } else {
                this.$message('预估不了，匹配不到计费规则');
              }
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
        }
      });
    },
    reset: function () {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.$ue.resetObjNull(this.form);
    },
    show (row) {
      this.reset();
      this.chargingRuleId = row.id;
      this.form.chargingFormulas = row.chargingFormulas;
      this.dialogVisible = true;
      this.loading = false;
    }
  },
  mounted () {
  }
};
</script>
